<template>
  <div class="details test-1">
    <div class="details-one">
      <div class="one-kuan-one">
        <img :src="Detailsshuju.coverImgUrl" alt="" />
      </div>
      <div class="one-kuan-two">
        <div class="text-one">{{ Detailsshuju.name }}</div>
        <div class="text-two">
          <div class="two-img">
            <img :src="imges" alt="" />
          </div>
          <div class="two-text">
            &nbsp;&nbsp;&nbsp;<span>{{ shijian }}</span
            >&nbsp;创建
          </div>
        </div>
        <div class="text-three">
          <button class="atrive-one" @click="quanbu(Detailsshuju1)">
            播放全部&nbsp;&nbsp;<van-icon name="plus" />
          </button>
          <button
            class="atrive-two"
            @click="Collection(Detailsshuju)"
            :v-model="text"
          >
            {{ text }}
          </button>
        </div>
        <div class="text-four">
          <div class="text">标签：</div>
          <div class="lei-kuan" v-for="(item, index) in biao" :key="index">
            <div class="lei">{{ item }}</div>
          </div>
        </div>
        <div class="text-five">
          歌曲：{{ shulian }} &nbsp;&nbsp;播放：{{ Detailsshuju2.playCount }}
        </div>
      </div>
    </div>
    <div class="details-two">
      <Jie></Jie><Gequ :Gequ="Detailsshuju1"></Gequ>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
import Jie from "../components/Jie.vue";
import Gequ from "../components/Gequ.vue";
export default {
  name: "Details",
  data() {
    return {
      id: "",
      shulian: "",
      imges: "",
      shijian: "",
      text: "收藏",
      biao: [],
      Detailsshuju: [],
      Detailsshuju1: [],
      Detailsshuju2: [],
    };
  },
  components: {
    Jie,
    Gequ,
  },
  created() {
    this.id = this.$route.params.id;
    // console.log("this.id==>", this.id);
    this.Detailsqingqiu();
    this.Detailsqingqiu1();
    this.Detailsqingqiu2();
    this.Collectiontext(this.id);
  },
  methods: {
    quanbu(e) {
      this.$store.state.zon = [];
      for (let i = 0; i < e.length; i++) {
        this.axios({
          method: "get",
          url: "/song/detail?ids=" + e[i].id,
        })
          .then((result) => {
            // console.log("result==>", result.data.songs);
            // this.like = result.data.songs;
            this.$store.commit("update", { data: result.data.songs[0] });
          })
          .catch((err) => {
            console.log("err==>", err);
          });
      }
      this.$store.commit("updateTwo", { data: e[0].id });
      this.axios({
        method: "get",
        url: "/song/url?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.data[0].url);
          this.$store.commit("updateOne", { data: result.data.data[0].url });
          this.$store.commit("updateL", { data: e[0].name });
          this.$store.commit("updateI", { data:e[0].al.picUrl  });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
      this.axios({
        method: "get",
        url: "/lyric?id=" + e[0].id,
      })
        .then((result) => {
          // console.log("result==>", result.data.lrc.lyric);
          this.$store.commit("updateLyric", { data: result.data.lrc.lyric });
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Collectiontext(id) {
      let shuzu = JSON.parse(JSON.stringify(this.$store.state.collectionGedan));
      // console.log("shuzu==>", shuzu);
      if (shuzu.length > 0) {
        for (let index = 0; index < shuzu.length; index++) {
          if (id == shuzu[index].id) {
            // console.log("id==>", id);
            // console.log(" shuzu[index].id==>", shuzu[index].id);
            this.text = this.$store.state.collectionGedanTextTwo;
            // return this.text;
            // console.log("this.text==>", this.text);
            break;
          }
        }
      }
      console.log("this.text==>", this.text);
    },
    Collection(e) {
      if (this.$store.state.ifEavr) {
        let shuzu = JSON.parse(
          JSON.stringify(this.$store.state.collectionGedan)
        );
        if (shuzu.length == 0) {
          this.$store.state.collectionGedan.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
        if (shuzu.length > 0) {
          for (let index = 0; index < shuzu.length; index++) {
            if (e.id == shuzu[index].id) {
              shuzu.splice(index, 1);
              this.$store.state.collectionGedan = shuzu;
              Toast("取消成功！！！");
              this.text = this.$store.state.collectionGedanTextOne;
              return;
            }
          }
          this.$store.state.collectionGedan.push(e);
          Toast("收藏成功！！！");
          this.text = this.$store.state.collectionGedanTextTwo;
        }
      } else {
        Toast("请登录！！！");
      }
    },
    Detailsqingqiu() {
      this.axios({
        method: "get",
        url: "/playlist/detail?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=0=>", result);
          this.Detailsshuju = result.data.playlist;
          this.biao = result.data.playlist.tags;
          this.imges = result.data.playlist.creator.avatarUrl;
          this.shijian = result.data.playlist.createTime;
          let date = this.shijian;
          date = new Date(date);
          let year = date.getFullYear(); // 年
          let month = date.getMonth() + 1; // 月, 月份是从0开始算的 0 - 11
          let data = date.getDate(); // 日

          let hour = date.getHours(); // 时
          let minute = date.getMinutes(); // 分
          let second = date.getSeconds(); // 秒
          // 优化一下，一般在显示 月 日 时分秒的时候我们习惯按照两位的方式去显示；如果数字是一位的我们补齐一个0即可
          month = month < 10 ? "0" + month : month;
          date = date < 10 ? "0" + date : date;
          hour = hour < 10 ? "0" + hour : hour;
          minute = minute < 10 ? "0" + minute : minute;
          second = second < 10 ? "0" + second : second;
          let munder = year + " - " + month + " - " + data;
          this.shijian = munder;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Detailsqingqiu1() {
      this.axios({
        method: "get",
        url: "/playlist/track/all?id=" + this.id + "&limit=100000&offset=1",
      })
        .then((result) => {
          // console.log("result=1=>", result);
          this.Detailsshuju1 = result.data.songs;
          // console.log("this.Detailsshuju1=1=>", this.Detailsshuju1);
          this.shulian = this.Detailsshuju1.length;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
    Detailsqingqiu2() {
      this.axios({
        method: "get",
        url: "/playlist/detail/dynamic?id=" + this.id,
      })
        .then((result) => {
          // console.log("result=2=>", result.data);
          this.Detailsshuju2 = result.data;
        })
        .catch((err) => {
          console.log("err==>", err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.test-1::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.test-1::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  // border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #b3b3b3;
}
.test-1::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  // border-radius: 10px;
  background: #ededed;
}
.details {
  width: 100%;
  height: 500px;
  overflow-y: scroll;
  background-color: white;
}
.details-one {
  width: calc(100% - 40px);
  height: 180px;
  padding: 20px 20px;
  .one-kuan-one {
    float: left;
    width: 180px;
    height: 180px;
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .one-kuan-two {
    float: left;
    width: calc(73% - 20px);
    height: 180px;
    padding-left: 20px;
    font-size: 11px;
    color: rgb(63, 63, 63);
    .text-one {
      width: 100%;
      height: 30px;
      font-size: 17px;
      line-height: 30px;
    }
    .text-two {
      width: 100%;
      height: 35px;
      line-height: 35px;
      .two-img {
        float: left;
        width: 35px;
        height: 35px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .two-text {
        float: left;
        width: 92%;
        height: 35px;
        span {
          color: rgb(0, 70, 161);
        }
      }
    }
    .text-three {
      width: 100%;
      height: 50px;
      button {
        width: 100px;
        height: 30px;
        border: 0;
        border-radius: 20px;
        margin-right: 10px;
        margin-top: 10px;
      }
      .atrive-one {
        color: rgb(255, 255, 255);
        background-color: rgb(245, 112, 112);
      }
      .atrive-one:hover {
        background-color: rgb(233, 106, 106);
      }
      .atrive-two {
        border: 1px solid rgb(36, 36, 36);
        background-color: rgb(255, 255, 255);
      }
      .atrive-two:hover {
        background-color: rgb(236, 236, 236);
      }
    }
    .text-four {
      width: 100%;
      height: 25px;
      .text {
        float: left;
        width: 40px;
        height: 25px;
        line-height: 25px;
      }
      .lei-kuan {
        float: left;
        height: 19px;
        font-size: 10px;
        line-height: 19px;
        padding: 3px 5px;
        margin-right: 5px;
        text-align: center;
        .lei {
          width: 100%;
          height: 100%;
          padding: 0 5px;
          border-radius: 15px;
          background-color: rgb(235, 235, 235);
        }
      }
    }
    .text-five {
      width: 100%;
      height: 25px;
      line-height: 25px;
    }
  }
}
</style>